<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>服务中心</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0,user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
	<link href="css/bootstrap.css" rel="stylesheet" />
	<link href="css/bootstrap-responsive.css" rel="stylesheet" />
	<!--<link href="css/stilearn.css" rel="stylesheet" />-->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
  <link rel="alternate icon" type="img/hengwang-1.png" href="img/hengwang-1.png">
  <link rel="stylesheet" href="css/amazeui.css"/>
  <link rel="stylesheet" href="css/style.css"/>
	<style>
		#box {display:none;position:absolute;width:1324px;height:850px;border:#f60 solid 2px;z-index:200;background:#fff;}
		#closeBtn {position:absolute;right:10px;top:10px;cursor:pointer;}
		#greybackground {background:#000;display:block;z-index:100;width:100%;position:absolute;top:0;left:0;}
		.buttonforSub{
			position: absolute;
			right: 215px;
			bottom: 239px;
			z-index: 201;
			display: none;
			cursor: pointer;
		}
		#riqizhanshi{
			position: absolute;
			right: 105px;
			bottom: 280px;
			z-index: 201;
			display: none;
			cursor: pointer;
			color: #f2e0eb;
		}
	</style>
</head>
<body>
<header class="am-topbar header">
	<div class="am-container-1">
		<div class="left hw-logo">
		  <!--<img class=" logo" src="img/HENGWANG.png"></img>-->
			<img class="word" src="img/hw-word.png"></img>
    </div>
  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
          data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span
      class="am-icon-bars"></span></button>

  <div class="am-collapse am-topbar-collapse right" id="doc-topbar-collapse">
    

    <div class=" am-topbar-left am-form-inline am-topbar-right" role="search">
      <ul class="am-nav am-nav-pills am-topbar-nav hw-menu">
      <li><a href="index.html">首页</a></li>
      <li><a href="solutions.html">个人中心</a></li>
      <li><a href="product-show.html">订单服务 </a></li>
      <li><a href="customer-case.html">套餐服务</a></li>
      <li class="hw-menu-active"><a href="service-center.html">服务中心 </a></li>
      <li><a href="news.html">魔发学院 </a></li>
      <li><a href="about-us.html">关于我们</a></li>
      <li><a href="recruit.html">招贤纳士 </a></li>
    </ul>
    </div>
resour
  </div>
  </div>
</header>
<div class="toppic">
	 <div class="am-container-1">
	 <div class="toppic-title left">
			<i class="am-icon-hand-paper-o toppic-title-i"></i>
			<span class="toppic-title-span">服务中心</span>
			<p>Service Center</p>
		</div>
		<div class="right toppic-progress">
			<span><a href="index.html" class="w-white">首页</a></span>
			<i class=" am-icon-arrow-circle-right w-white"></i>
			<span><a href="service-center.html" class="w-white">服务中心</a></span>
		</div>
	</div>
</div>

<div class=" am-container-1">
	<div class="service-center">
	    <ul class="service-ul">
	    	<li class="am-u-lg-12 am-u-md-12 am-u-sm-12">
	    		<div class="am-u-lg-8 am-u-md-8 am-u-sm-12 service-content" >
	    			<h4 class="w-blue" style="margin-bottom: 50px">请选择您心怡的理发师</h4>
					<div class="span6">
						<!--box tab-->
						<div class="box-tab corner-all">
							<div class="tabbable tabs-left" style="height: 317px;width: 600px">
								<ul class="nav nav-tabs">
									<!--tab menus-->
									<li class="active"><a data-toggle="tab" href="#boxtab-left-1">总监</a></li>
									<li><a data-toggle="tab" href="#boxtab-left-2">首席</a></li>
									<li><a data-toggle="tab" href="#boxtab-left-3">资深</a></li>
								</ul>
								<!-- widgets-tab-body -->
								<div class="tab-content">
									<div class="tab-pane fade in active" id="boxtab-left-1">
										<p data-am-modal="{target: '#my-popup'}" id="popup"><a href=javascript:></a> Tony&nbsp;&nbsp;&nbsp;&nbsp;思恒理发店艺术总监理发师，给你的发型不一样的体验</p>
										<img src="img/app1.png" alt="" style="width:325px;height: 250px;">
										<!--<p>Sunny</p>-->
										<!--<p>Jensen</p>-->
										<!--<p>Lucy</p>-->
									</div>
									<div class="tab-pane fade" id="boxtab-left-2">
										<p>Tom</p>
										<p>Sun</p>
										<p>Jen</p>
										<p>Lcy</p>
									</div>
									<div class="tab-pane fade" id="boxtab-left-3">
										<p>Bomo</p>
										<p>Yucy</p>
										<p>Pem</p>
										<p>D</p>
									</div>
								</div><!--/widgets-tab-body-->
							</div>
						</div><!--/box tab-->
					</div><!--/span-->



				</div>
	    		<!--<div class="am-u-lg-4 am-u-md-4 am-u-sm-12 service-img">-->
	    		   <!--<img src="img/android.png" />	-->
	    		<!--</div>-->
	    	</li>

	    </ul>
	</div>
</div>
<div id="box">
	<span id="closeBtn">关闭</span>
	<iframe src="calendar.html?data-id=1" frameborder="0" scrolling="false" width="100%" height="100%" id="calendariframe"></iframe>
	<div class="buttonforSub" ><input type="button" value="提交预约时间" id="submitBookTime"></div>
	<span id="riqizhanshi"></span>
</div>




<footer class="footer ">

	<ul>

		<li class="am-u-lg-4 am-u-md-4 am-u-sm-12 part-5-li2">
			<div class="part-5-title">联系我们</div>
			<div class="part-5-words2">
				<span>Copyright ©2018 专业综合设计</span>
				<span>店家联系电话：xxxxx</span>
				<span>author by Mr.huang</span>
				<span>邮箱:support@siheng.site</span>
				<span><i class="am-icon-phone"></i><em >027-520520</em></span>
			</div>
		</li>
		<li class="am-u-lg-4 am-u-md-4 am-u-sm-12 ">
			<div class="part-5-title">相关链接</div>
			<div class="part-5-words2">
				<ul class="part-5-words2-ul">
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="solutions.html">个人中心</a></li>
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="product-show.html">订单服务</a></li>
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="customer-case.html">套餐服务</a></li>
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="service-center.html">服务中心</a></li>
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="about-us.html">关于我们</a></li>
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="recruit.html">招贤纳士</a></li>
					<div class="clear"></div>
				</ul>
			</div>
		</li>
		<div class="clear"></div>
	</ul>

</footer>

</body>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/amazeui.min.js"></script>
<!--[if (gte IE 9)|!(IE)]><!-->

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<!-- required stilearn template js, for full feature-->
<script src="js/holder.js"></script>
<script src="js/stilearn-base.js"></script>
<script type="text/javascript" src="js/Treatment.js"></script>
<script type="text/javascript" src="js/jquery.mockjax.js"></script>
<script>
    // var canGetCookie = 0;//是否支持存储Cookie 0 不支持 1 支持
    var ajaxmockjax = 1;//是否启用虚拟Ajax的请求响 0 不启用  1 启用
	// var time_=null;
	// var date_=null;
	$(function(){
    var screenwidth,screenheight,mytop,getPosLeft,getPosTop;
    screenwidth = $(window).width();
    screenheight = $(window).height();
    //获取滚动条距顶部的偏移
    mytop = $(document).scrollTop();
    //计算弹出层的left
    getPosLeft =(screenwidth-1342)/2;
    //计算弹出层的top
    getPosTop =(screenheight-900)/2;
    //css定位弹出层
    $("#box").css({"left":getPosLeft,"top":getPosTop});
    //当浏览器窗口大小改变时...
    $(window).resize(function(){
        screenwidth = $(window).width();
        screenheight = $(window).height();
        mytop = $(document).scrollTop();
        getPosLeft =(screenwidth-1342)/2;
        getPosTop = (screenheight-900)/2;
        $("#box").css({"left":getPosLeft,"top":getPosTop+mytop});
    });

    //当拉动滚动条时...
    $(window).scroll(function(){
        screenwidth = $(window).width();
        screenheight = $(window).height();
        mytop = $(document).scrollTop();
        getPosLeft =(screenwidth-1342)/2;
        getPosTop =(screenheight-900)/2;
        $("#box").css({"left":getPosLeft,"top":getPosTop+mytop});
    });

    //点击链接弹出窗口
    $("#popup").click(function(){
        $("#box").fadeIn("fast");
        $(".buttonforSub").fadeIn("fast");
        $("#riqizhanshi").fadeIn("fast");
        //获取页面文档的高度
        var docheight = $(document).height();
        //追加一个层，使背景变灰
        $("body").append("<div id='greybackground'></div>");
        $("#greybackground").css({"opacity":"0.5","height":docheight});
        return false;
    });

    //点击关闭按钮
    $("#closeBtn").click(function() {
        $("#box").hide();
        $(".buttonforSub").hide();
        $("#riqizhanshi").hide();
        //删除变灰的层
        $("#greybackground").remove();
        return false;
    });
    // console.log($("#submitBookTime").val());
        $("#submitBookTime").on('click',function (event) {
            // console.log($("#calendariframe").contents().find("#calendar").val());
            console.log(date_);
            console.log(time_);
            var  url="Ajax/subscribe/subscribeBarberByBid.action";
            var JsonData={"menuId":(window.location.search).substring(1),"barberId":1,"time":date_+" "+time_};

            AjaxPost(url, JsonData,
                function () {
                    //ajax加载中
                },
                function (data) {
                    //ajax返回
                    //认证完成
					alert(data.Text+" 即将跳转到订单页面");
					window.location.href="product-show.html";
                })
            // alert((window.location.search).substring(1));
            // jQuery.ajax({
            //     url: 'http://localhost:8080/subscribe/subscribeBarberByBid.action',
            //     type: 'POST',
            //     dataType: 'json',
            //     contentType:'application/json',
            //     data: JSON.stringify(data),
            //     complete: function(xhr, textStatus) {
            //         // alert("complete");
            //     },
            //     success: function(data, textStatus, xhr) {
            //         alert(data.Text+" 即将跳转到订单页面");
            //         window.location.href="product-show.html?"+data;
            //     },
            //     error: function(xhr, textStatus, errorThrown) {
            //         // alert(errorThrown);
            //     }
            // });
        });


	// $("#calendariframe").contents().find("#bookingTimeSub")
	// console.log($("#calendariframe").contents().find("#bookingTimeSub").val());
});
    function f123(date_temp,time_temp) {
        date_=date_temp;
        time_=time_temp;
        // console.log((date_temp.getMonth()+1)+"day"+new Date(date_temp).getDate() );
        // alert("您选的时间是"+(date_temp.getMonth()+1)+"月"+date_temp.getDate()+"日");
        $("#riqizhanshi").html("您选的时间是"+(date_temp.getMonth()+1)+"月"+date_temp.getDate()+"日"+time_temp);
    }
    if(ajaxmockjax == 1){
        $.mockjax({
            url: 'Ajax/subscribe/subscribeBarberByBid.action',
            status: 200,
            responseTime: 50,
            responseText: {"Status":"ok","Text":"提交成功！"}
        });
        $.mockjax({
            url: 'Ajax/False',
            status: 200,
            responseTime: 50,
            responseText: {"Status":"Erro","Erro":"有误"}
        });
    }
</script>
</html>
